<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>message</title>
    <style>
        div{
            display: block;
        }
        .container {
            width: 1200px;
            margin: 0 auto;
        }
        .content {
            overflow: hidden;
            margin-top: 30px;
        }
        .main {
            padding: 0 18px;
        }
        .info-content {
            border: 1px solid #e1e1e1;
            position: relative;
        }
         .clearfix:before {
            content: " ";
            display: table;
        }
        .clearfix:after {

        }
        .clearfix:after {
            content: " ";
            display: table;
            clear: both;
        }
        .info-content .user-profile-nav {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 200px;
            background-color: #f4f3f4;
            text-align: center;
            border-right: 1px solid #e1e1e1;
        }
        .info-content .user-profile-nav h1 {
            margin-top: 40px;
            margin-bottom: 30px;
            font-size: 22px;
            color: #222;
            font-weight: 400;
        }
        .info-content .user-profile-nav a {
            display: block;
            font-weight: 400;
            color: #333;
            height: 40px;
            width: 202px;
            margin-left: -1px;
            line-height: 40px;
            font-size: 18px;
        }
        a {
            text-decoration: none;
        }
        .info-content .user-profile-nav a.active {
            color: #fff;
            background-color: #ed3931;
        }
        .info-content .profile-container {
            float: left;
            margin-left: 200px;
            padding-left: 40px;
            width: 922px;
            min-height: 900px;
        }
        .info-content .orders-container .profile-title, .info-content .profile-container .profile-title {
            padding: 26px 0;
            color: #ec443f;
            font-size: 18px;
            border-bottom: 1px solid #e1e1e1;
            margin-bottom: 30px;
        }
        .avatar-container {
            text-align: center;
            float: left;
            color: #333;
            background: #fff;
            width: 270px;
        }
        .avatar-container .avatar-content img {
            width: 258px;
            height: 258px;
        }
        img {
            border-style: none;
        }
        .avatar-container .upload-avatar-image {
            position: relative;
        }
        .avatar-container .upload-avatar-image .upload-btn {
            cursor: pointer;
            margin: 20px auto 0;
            width: 182px;
            height: 56px;
            line-height: 56px;
            color: #5b5b5b;
            background-color: #e6e6e6;
            border-radius: 10px;
            border: 1px;
            font-size: 18px;
            padding: 0;
        }
        input {
            overflow: visible;
        }
        .avatar-container .upload-avatar-image #fileUpload {
            position: absolute;
            top: 0;
            right: 0;
            opacity: 0;
            bottom: -50px;
        }
        .avatar-container .tips {
            margin-top: 10px;
            color: #999;
            font-size: 18px;
            line-height: 30px;
        }
        .userexinfo-form {
            float: left;
            width: 495px;
            margin-left: 58px;
        }
        form {
            display: block;
            margin-top: 0;
        }
        .userexinfo-form .userexinfo-form-section {
            color: #666;
            position: relative;
            margin: 20px 0;
            padding-left: 90px;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
        }
        .userexinfo-form p {
            position: absolute;
            top: 0;
            left: 0;
            width: 80px;
            text-align: right;
            color: #333;
            padding: 0;
            margin: 0;
        }
        p {
            display: block;
        }
        .userexinfo-form .userexinfo-form-section input[type=text] {
            width: 240px;
            font-size: 12px;
            height: 30px;
            padding-left: 10px;
        }
        .userexinfo-form .userexinfo-form-section p {
            font-size: 16px;
        }
        .date-picker span {
            display: inline-block;
        }
        .ui-select {
            display: inline-block;
            background: transparent;
            border: 1px solid #999;
            border-radius: 0;
            font-size: 14px;
            height: 30px;
            position: relative;
        }
        .ui-select select {
            padding: 0 20px 0 10px;
            width: 100%;
            border: none;
            box-shadow: none;

        }
        option {
            font-weight: normal;
            display: block;
            padding: 0px 2px 1px;
        }
        .ui-select:after {
            content: "";
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid #999;
            position: absolute;
            top: 13px;
            right: 3px;
        }
        .userexinfo-form .expand-list {
            height: 110px;
        }

        .userexinfo-form .userexinfo-form-section .bottom-tips {
            white-space: nowrap;
            color: #ccc;
        }
        .userexinfo-form .userexinfo-bottom-section {
            color: #666;
            position: relative;
            margin-top: 40px;
            padding-left: 90px;
            line-height: 30px;
            font-size: 14px;
        }
        .clearfix:before {
            content: " ";
            display: table;
        }
        .userexinfo-form .form-save-btn {
            border-radius: 5px;
            width: 100px;
            height: 40px;
            color: #fff;
            font-size: 18px;
            line-height: 40px;
            border: none;
            background-color: #ed3931;
            padding: 0;
        }
        .userexinfo-form .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }
    </style>
    <link rel="stylesheet" href="css/headerCss.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

</head>
<body>
<myheader :search="search"></myheader>
<div style="height: 80px"></div>

<div class="container" id="app">
    <div class="content">
        <div class="main">
            <div class="info-content clearfix">
                <div class="user-profile-nav">
                    <h1>个人中心</h1>
                    <a href="./order.html" class="orders">我的订单</a>
                    <a href="./message.html" class="profile active">基本信息</a>
                </div>

                <form action="" id="f1" enctype="multipart/form-data">
                <div class="profile-container">
                    <div class="profile-title">基本信息</div>
                    <div class="avatar-container">
                        <div class="avatar-content">
                            <img :src="user.url" class="J-setted-avatar">
                            <div class="J-upload-avatar-w upload-avatar-image">
                                <input type="button" class="J-upload-avatar upload-btn" value="更换头像">
                                <input type="file" id="fileUpload" name="picFile" v-model="picFile">
                            </div>
                            <div class="tips">支持JPG,JPEG,PNG格式,且文件需小于10M</div>
                        </div>
                    </div>
                    <div id="J-userexinfo-form" class="userexinfo-form">
                        <div class="userexinfo-form-section">
                            <p>昵称:</p>
                            <span>
                                <input type="text" name="nick"
                                class="ui-checkbox"  v-model="nickName" :placeholder="user.nickName">
                            </span>
                        </div>
                        <div class="userexinfo-form-section" v-if="user.gender=='男'">
                            <p>性别:</p>
                            <span>
                                <input type="radio" name="gender"
                                       class="ui-radio radio-first"  value="男" v-model="gender" checked>
                                <label>男</label>
                            </span>
                            <span>
                                <input type="radio" name="gender"
                                       class="ui-radio"  value="女" v-model="gender">
                                <label>女</label>
                            </span>
                        </div>
                        <div class="userexinfo-form-section" v-if="user.gender=='女'">
                            <p>性别:</p>
                            <span>
                                <input type="radio" name="gender"
                                       class="ui-radio radio-first" value="男" v-model="gender">
                                <label>男</label>
                            </span>
                            <span>
                                <input type="radio" name="gender"
                                       class="ui-radio"  value="女" v-model="gender" checked>
                                <label>女</label>
                            </span>
                        </div>
                        <div class="userexinfo-form-section">
                            <p>爱好:</p>
                            <span>
                              <input type="text" name="hobby" v-model="hobby" :placeholder="user.hobby">
                            </span>
                        </div>
                        <div class="userexinfo-form-section">
                            <p>从事行业:</p>
                            <span>
                              <input type="text" name="job" v-model="job" :placeholder="user.job">
                            </span>
                        </div>
                        <div class="userexinfo-form-section">
                            <p>个性签名:</p>
                            <span>
                                <input type="text" id="userexinfo-form-bio"
                                       class="ui-checkbox" :placeholder="user.signature"
                                       name="signature" v-model="signature">
                            </span>
                        </div>
                        <div class="userexinfo-bottom-section clearfix">
                            <input type="button" class="form-save-btn" value="保存" @click="update()">
                        </div>
                    </div>
                </div>
                </form>
            </div>
        </div>
    </div>
</div>


<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/header.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            picFile:"",
            nickName:"",
            gender:"",
            hobby:"",
            job:"",
            signature:"",
            user:{}
        },
        methods:{
            update:function () {
                let form =new FormData();
                form.append("picFile",this.picFile)
                form.append("nick",this.nickName)
                form.append("gender",this.gender)
                form.append("hobby",this.hobby);
                form.append("job",this.job)
                form.append("signature",this.signature)
                axios.post("/User/update",form).then(function () {
                })
            }
        },
        created:function () {
            axios.get("/User/select").then(function (response) {
                vm.user=response.data;
            })
        }
    })
</script>
</body>
</html>